<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片管理系统</title>

    <!-- 引入 Bootstrap 样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJX3Jd+z4wD7g6V5/JUoR0Y8plslM/cz1QNhL5XzUHgHlU4V5Rgfnp3q8j4Z" crossorigin="anonymous">
    <style>
        body {
            background-color: #f4f7f6;
            font-family: 'Arial', sans-serif;
        }
        h1 {
            color: #004085;
            margin-bottom: 20px;
        }
        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 15px;
            padding: 15px;
        }
        .card a {
            font-size: 18px;
            color: #007bff;
            text-decoration: none;
            transition: color 0.3s;
        }
        .card a:hover {
            color: #0056b3;
        }
        .alert {
            margin-top: 20px;
        }
        .footer {
            margin-top: 40px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        td {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>欢迎来到名片管理系统</h1>

    <div class="card">
        <div class="card-body">
            <div>
                <a href="/card/addCard" class="btn btn-primary btn-lg">添加名片</a>
                <a href="/card/updatepwd" class="btn btn-primary btn-lg">修改密码</a>
                <a href="/user/logout" class="btn btn-primary btn-lg">安全退出</a>
            </div>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>单位</th>
                    <th>职务</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 使用 Thymeleaf 绑定后端数据 -->
                <tr th:each="card : ${cards}">
                    <td th:text="${card.id}"></td>
                    <td th:text="${card.name}"></td>
                    <td th:text="${card.company}"></td>
                    <td th:text="${card.post}"></td>
                    <td>
                        <a th:href="@{/card/detail(id=${card.id})}" class="btn btn-info btn-sm">详情</a>
                        <a th:href="@{/card/update(id=${card.id})}" class="btn btn-success btn-sm">编辑</a>
                        <a th:onclick="'deleteCard(' + ${card.id} + ')'" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
                <!-- 更多名片数据 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz4fnFO9gybW7vPTI7zF1BqzJJxhEpb2fXZ5v0zUJmVYSuXXy5Cl3z0p/Ag" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eylX5q4r9vPtL7gW0lG7lFJ6fAKl8yQpQJbDqZz7r6A9kAGuEzJ7Qmg" crossorigin="anonymous"></script>
<script>
    function deleteCard(id) {
        if (confirm('确定要删除此名片吗？')) {
            fetch('/card/delete?id=' + id, {
                method: 'Post'
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                } else {
                    alert('删除失败');
                }
            });
        }
    }
</script>
</body>
</html>
